<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>事件观察</title>
</head>
<body>
<form action="" name="form1">
    <label for="textarea1"><textarea name="textarea1" id="textarea1" cols="40" rows="15"></textarea></label>
    <label for="textarea2"><textarea name="textarea2" id="textarea2" cols="40" rows="15"></textarea></label>
    <br>
    <input type="button" name="button1" value="Clear event textarea">
</form>
<script>
    var myForm = document.form1;
    var textArea1 = myForm.textarea1;
    var textArea2 = myForm.textarea2;
    var btnClear = myForm.button1;

    function displayEvent(e) {
        var message = textArea2.value;
        message = message + e.type + '\n';
        textArea2.value = message;
    }

    function clearEventLog(e) {
        textArea2.value = '';
    }

    textArea1.addEventListener('change', displayEvent);
    textArea1.addEventListener('keydown', displayEvent);
    textArea1.addEventListener('keypress', displayEvent);
    textArea1.addEventListener('keyup', displayEvent);
    btnClear.addEventListener('click', clearEventLog);
</script>
</body>
</html>